<template>
    <div id="classify" class="classify">
    	<div class="header border-bottom">
            <div class="logo"><img src="@/assets/images/logo.png" alt=""></div>
            <div class="search_ico" @click="search_page"></div>
        </div>
        <div class="classify_con">
            <div class="classify_left" ref="classify_item_scroll">
                <div class="classify_menu">
                    <div class="classify_item border-bottom" :class="{'current':currentIndex===index}" v-for="(item,index) of classify_menu" :key="index" @click="selectMenu(index)">{{item.name}}</div>
                </div>
            </div>
            <div class="classify_right" ref="classify_scroll">
                <div class="classify_right_in">
                    <div class="classify_content_item" v-for="(item,index) of classify_item" :key="index">
                    <div class="classify_content_title">{{item.title}}</div>
                    <ul class="classify_content_list">
                        <li v-for="(items,index) of item.items">
                            <img v-lazy="items.imgUrl" alt="">
                            <p>{{items.desc}}</p>
                        </li>
                    </ul>
                </div>
                </div>
            </div>
        </div>
        <tabMenu></tabMenu>
    </div>
</template>

<script>
import BScroll from 'better-scroll'
import TabMenu from '@/components/tabMenu.vue'  
export default {
    name: 'Classify',
    data(){
        return {
            classify_menu:[{name:"美妆个护"},{name:"母婴用品"},{name:"家居生活"},{name:"营养保健"},{name:"国际轻奢"},{name:"服饰"}],
            listHeight:[],
            scrollY:0,
            //currentIndex:0,
            classify_item:[{title:"基础护肤",items:[{desc:"洁面",imgUrl:"http://img.tepin.hk/HWG-DE/prt/5/7/m/1470365053609128.jpg"},{desc:"乳液/面霜",imgUrl:"http://img.tepin.hk/HWG-DE/prt/d/z/7/1470365076906526.jpg"},{desc:"面部精华",imgUrl:"http://img.tepin.hk/HWG-DE/prt/l/m/d/1470365092530388.jpg"},{desc:"眼部护理",imgUrl:"http://img.tepin.hk/HWG-DE/prt/c/a/e/1470365111502955.jpg"},{desc:"防晒修复",imgUrl:"http://img.tepin.hk/HWG-DE/prt/t/3/j/1470365125995293.jpg"},{desc:"唇部护理",imgUrl:"http://img.tepin.hk/HWG-DE/prt/k/2/l/1470365138563896.jpg"},{desc:"护肤套装",imgUrl:"http://img.tepin.hk/HWG-DE/prt/2/r/5/1470365155612506.jpg"},{desc:"面部护理",imgUrl:"http://img.tepin.hk/HWG-DE/prt/l/9/9/1470365488110293.jpg"},{desc:"面膜",imgUrl:"http://img.tepin.hk/HWG-DE/prt/4/e/x/1470365181699260.jpg"},{desc:"卸妆",imgUrl:"http://img.tepin.hk/HWG-DE/prt/2/u/x/1470365354525334.jpg"}]},{title:"母婴用品",items:[{desc:"婴幼奶粉",imgUrl:"http://img.tepin.hk/HWG-DE/prt/f/g/7/1490944852473336.png"},{desc:"成人奶粉",imgUrl:"http://img.tepin.hk/HWG-DE/prt/o/u/q/1490948343842718.png"},{desc:"孕妇奶粉",imgUrl:"http://img.tepin.hk/HWG-DE/prt/2/l/e/1490948387974400.png"},{desc:"牛奶粉",imgUrl:"http://img.tepin.hk/HWG-DE/prt/8/u/d/1490948410154263.png"},{desc:"纸尿裤",imgUrl:"http://img.tepin.hk/HWG-DE/prt/4/e/a/1490948427687271.png"},{desc:"拉拉裤",imgUrl:"http://img.tepin.hk/HWG-DE/prt/l/t/d/149094844077351.png"},{desc:"儿童奶片",imgUrl:"http://img.tepin.hk/HWG-DE/prt/j/t/4/1490948499496803.png"},{desc:"婴幼儿零食",imgUrl:"http://img.tepin.hk/HWG-DE/prt/v/s/7/1491359320581286.png"},{desc:"磨牙棒/饼干",imgUrl:"http://img.tepin.hk/HWG-DE/prt/f/b/h/1491359285940457.png"}]},{title:"家居生活",items:[{desc:"牙膏/牙粉",imgUrl:"http://img.tepin.hk/HWG-DE/prt/n/x/r/1494985044637950.png"},{desc:"牙刷/牙线",imgUrl:"http://img.tepin.hk/HWG-DE/prt/s/w/n/1494985067394653.png"},{desc:"漱口水",imgUrl:"http://img.tepin.hk/HWG-DE/prt/8/r/8/1494985083899740.png"},{desc:"其它口腔用品",imgUrl:"http://img.tepin.hk/HWG-DE/prt/2/k/t/1494985101943306.png"},{desc:"纸品",imgUrl:"http://img.tepin.hk/HWG-DE/prt/o/n/b/1494985608579965.png"},{desc:"衣物清洁",imgUrl:"http://img.tepin.hk/HWG-DE/prt/7/s/o/1462934783453405.jpg"},{desc:"驱虫除臭/除菌",imgUrl:"http://img.tepin.hk/HWG-DE/prt/1/h/m/1462934819034465.jpg"},{desc:"收纳整理",imgUrl:"http://img.tepin.hk/HWG-DE/prt/1/j/b/1494985655669244.png"}]},{title:"营养保健",items:[{desc:"维生素",imgUrl:"http://img.tepin.hk/HWG-DE/prt/t/7/u/1460125537049691.jpg"},{desc:"钙镁锌硒",imgUrl:"http://img.tepin.hk/HWG-DE/prt/t/z/3/1460125582998774.jpg"},{desc:"鱼油",imgUrl:"http://img.tepin.hk/HWG-DE/prt/p/b/z/1460125616150186.jpg"},{desc:"钙",imgUrl:"http://img.tepin.hk/HWG-DE/prt/e/c/d/1460125653071521.jpg"},{desc:"参类",imgUrl:"http://img.tepin.hk/HWG-DE/prt/l/0/r/1460125684908575.jpg"},{desc:"蜂产品",imgUrl:"http://img.tepin.hk/HWG-DE/prt/e/5/r/1460125758019989.jpg"},{desc:"DHA",imgUrl:"http://img.tepin.hk/HWG-DE/prt/b/6/0/1460545106131652.jpg"},{desc:"益生菌",imgUrl:"http://img.tepin.hk/HWG-DE/prt/j/1/u/1470799992676348.jpg"},{desc:"铁",imgUrl:"http://img.tepin.hk/HWG-DE/prt/u/s/2/1470800018928503.jpg"},{desc:"氨基酸",imgUrl:"http://img.tepin.hk/HWG-DE/prt/w/m/n/147080003511223.jpg"}]},{title:"国际轻奢",items:[{desc:"女士箱包",imgUrl:"http://img.tepin.hk/HWG-DE/prt/4/o/g/1460620394652374.jpg"},{desc:"男士箱包",imgUrl:"http://img.tepin.hk/HWG-DE/prt/b/w/v/1460620607473322.jpg"},{desc:"功能箱包",imgUrl:"http://img.tepin.hk/HWG-DE/prt/u/3/v/1460619796889903.png"},{desc:"手表",imgUrl:"http://img.tepin.hk/HWG-DE/prt/h/a/s/1460619815426874.jpg"},{desc:"饰品",imgUrl:"http://img.tepin.hk/HWG-DE/prt/k/t/p/1460619830677570.jpg"},{desc:"配件",imgUrl:"http://img.tepin.hk/HWG-DE/prt/a/3/n/1470360508128706.jpg"},{desc:"太阳镜/墨镜",imgUrl:"http://img.tepin.hk/HWG-DE/prt/n/4/g/1468897500071403.jpg"},{desc:"腰带/皮带",imgUrl:"http://img.tepin.hk/HWG-DE/prt/u/i/x/1472284233976100.png"},{desc:"围巾",imgUrl:"http://img.tepin.hk/HWG-DE/prt/b/o/f/1473835673731753.jpg"}]},{title:"服饰",items:[{desc:"女士鞋",imgUrl:"http://img.tepin.hk/HWG-DE/prt/0/l/7/1504249849166151.jpg"},{desc:"男士鞋",imgUrl:"http://img.tepin.hk/HWG-DE/prt/9/d/u/1504249864094940.jpg"},{desc:"商务表",imgUrl:"http://img.tepin.hk/HWG-DE/prt/z/w/5/1504230641799859.jpg"},{desc:"时尚表",imgUrl:"http://img.tepin.hk/HWG-DE/prt/k/l/c/1504230712341636.jpg"},{desc:"手链",imgUrl:"http://img.tepin.hk/HWG-DE/prt/p/1/r/1504249332087658.jpg"},{desc:"项链",imgUrl:"http://img.tepin.hk/HWG-DE/prt/4/i/z/1504249402245211.jpg"},{desc:"戒指",imgUrl:"http://img.tepin.hk/HWG-DE/prt/k/v/r/1504249506125983.jpg"},{desc:"耳饰",imgUrl:"http://img.tepin.hk/HWG-DE/prt/k/j/n/1504249565655500.jpg"},{desc:"帽子",imgUrl:"http://img.tepin.hk/HWG-DE/prt/z/1/q/1504250185461804.jpg"},{desc:"围巾",imgUrl:"http://img.tepin.hk/HWG-DE/prt/y/q/p/150425023841665.jpg"},{desc:"太阳镜",imgUrl:"http://img.tepin.hk/HWG-DE/prt/b/j/7/1504250315137820.jpg"},{desc:"皮带",imgUrl:"http://img.tepin.hk/HWG-DE/prt/f/3/s/1504250348857806.jpg"},{desc:"男装",imgUrl:"http://img.tepin.hk/HWG-DE/prt/u/o/m/150425007155285.jpg"},{desc:"女装",imgUrl:"http://img.tepin.hk/HWG-DE/prt/q/6/4/1504250088932132.jpg"},{desc:"袜子",imgUrl:"http://img.tepin.hk/HWG-DE/prt/7/s/1/1505200170847894.jpg"},{desc:"女包",imgUrl:"http://img.tepin.hk/HWG-DE/prt/2/a/d/150425013584951.jpg"},{desc:"男包",imgUrl:"http://img.tepin.hk/HWG-DE/prt/3/9/v/1504250156871795.jpg"},{desc:"小型皮具",imgUrl:"http://img.tepin.hk/HWG-DE/prt/2/e/o/1504250428859425.jpg"}]}],
        }
    },
    components:{
        TabMenu
    },
    props:{
       
    },
    mounted(){
        this.classifyScroll=new BScroll(this.$refs.classify_scroll,{
            probeType:3,
            click:true
        })  
        this.classifyScroll.on('scroll',(pos)=>{
            this.scrollY=Math.abs(Math.round(pos.y));
            this._calculateHeight();
        })
    },
  methods:{
    _calculateHeight(){
        let classifyList=this.$refs.classify_scroll.getElementsByClassName('classify_content_item');
        let height=0;
        this.listHeight.push(height);
        for(let i=0;i<classifyList.length;i++){
            let item=classifyList[i]
            height+=item.clientHeight;
            this.listHeight.push(height);
        }
    },
    selectMenu(index){
        //this.currentIndex=index
        let classifyList=this.$refs.classify_scroll.getElementsByClassName('classify_content_item');
        let el=classifyList[index];
        this.classifyScroll.scrollToElement(el,300);
    },
    search_page(){
        this.$router.push('/search_page')
    }
  },
  computed:{
    currentIndex(){
        for(let i=0;i<this.listHeight.length;i++){
            let height1=this.listHeight[i];
            let height2=this.listHeight[i+1];
            if(!height2||(this.scrollY>=height1&&this.scrollY<height2)){
                return i;
            }   
        }
        return 0;
    }
  }
}

</script>

<style lang="stylus" scoped>
@import '~@/assets/css/varibles.styl'
.header{width: 100%;height:50px;line-height:50px;background:$bgColor;display: flex;position: relative;z-index:2;}
.logo{width:100%;height:100%;overflow: hidden;}
.logo img{display: table;margin:0 auto;width:90px;margin-top:14px;}
.search_ico{position:absolute;right:0;top:0;width:50px;height:50px;line-height:50px;background:url("~@/assets/images/search_ico.png") no-repeat center center;z-index:2;background-size:40%;}

.classify_con{width:100%;overflow:hidden;position:absolute;left:0;right:0;top:50px;bottom:50px;display:flex;}
.classify_left{width:80px;background:#f3f5f7;}
.classify_item{display:table;height:44px;width:56px;line-height:44px;padding:0 12px;font-size: 13px;text-align: center;}
.current{background:#fff;font-weight:700;position:relative;margin-top:-1px;z-index:10;}

.classify_right{flex:1;}
.classify_content_item{width:100%;overflow: hidden;}
.classify_content_title{padding-left: 14px;height:26px;line-height:26px;border-left: 2px solid #d9dde1;font-size: 12px;color: #93999f;background: #f3f5f7;}
.classify_content_item:nth-child(1) .classify_content_title{margin-top:0;}
.classify_content_list{width:100%;display: flex;display: -webkit-box;display: -webkit-flex;flex-wrap: wrap;padding-bottom: 10px;}
.classify_content_list li{-webkit-box-flex:0 0 33.3333%;-webkit-flex:0 0 33.3333%;flex:0 0 33.3333%;margin-top:10px;}
.classify_content_list li img{height:60px;display: table;margin:0 auto;}
.classify_content_list li p{text-align: center;font-size:12px;color:#333;padding-top:5px;}
.classify_right_in{padding-bottom:100px;}
</style>